$(function (){
    //var swiperCome;
    var btotal={suffix:'册'},btotal2={suffix:''},btotal3={suffix:'人'},total_obj,week_obj,today_obj;///定义数字滚动变化的变量
    var mypageNum=1;///定义一个全局变量记录轮播图当前滑动的页数
    var bars=$('.pernum .bar');//获得所有上面的bar进度条
    var totalbar = $('.totalPer .rectangle');///获得总计bar斜条框元素
    var barmsg=$('.pernum .co');//获得提示信息框
    //var openbtn=$('.open');
    var boxheight=($('.notice_box').height());//内容外层大盒子高
    //var noticebox=document.querySelector(".notice_box");//列表大盒子
    var currentslide=document.querySelector(".kpnoslide");//当前屏幕
    ////推荐页面分页器重写
    var currentpage= $('#mybanner .mypagination .currentpage');
    var totalpage= $('#mybanner .mypagination .totalpage');
    var bannerslids= $('#mybanner .swiper-wrapper .swiper-slide');
    currentpage.html(mypageNum);
    totalpage.html(bannerslids.length);

    /////首页时间戳自动更新
    showTime();
    timer = setInterval(showTime,1000);//绑定计时器。一秒钟调用一次函数，动态刷新时间
    //点击标题的返回按钮返回到首页
    $(".page_01 .back").click(function () {
        console.log('我点击返回了');
        mySwiper.slidePrev();
    });
    //通知页面内容滑动功能
    //var myScroll = new IScroll('.notice_box',{
    //    //scrollX: false,
    //    //scrollY: false, //隐藏掉直接不能滑动了
    //    mouseWheel: true,
    //    scrollbars: false
    //});
    ///主页面swiper上下滑动
    var mySwiper = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        direction: 'vertical',
        noSwiping : true,
        loop:true,
        onInit: function (mySwiper) { //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(mySwiper); //隐藏动画元素
            setTimeout(function () {
                swiperAnimate(mySwiper); //初始化完成开始动画
            }, 100);
        },
        onSlideChangeEnd: function (swiper) {
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            // 取出来正在表示的页面
            var activePage = $(swiper.slides[swiper.activeIndex]);
            if(swiper.activeIndex!=4){
                $(bars).each(function(i,e){
                    $(e).css('height',0);///柱状条高度清0
                });
                $(barmsg).each(function(i,e){
                    $(e).css('display','none');//信息框隐藏
                    $(e).css('bottom',0);//信息框定位重新回到底部
                    $(e).html(' ');///信息清0
                });

                $(totalbar).css('width',0);///总计柱状条宽度清0
                //console.log(swiper.activeIndex+'====123');

            }
            ////借阅排行榜页面
            if(swiper.activeIndex==2){
                $('.rank1').addClass('rank1_ani');
                $('.rank2').addClass('rank2_ani');
                $('.rank3').addClass('rank3_ani');
            }else{
                $('.rank1').removeClass('rank1_ani');
                $('.rank2').removeClass('rank2_ani');
                $('.rank3').removeClass('rank3_ani');
            }
            ///借还书加载折线图
            if(swiper.activeIndex==3){
                ///借还书当前页添加各种动效
                $('.outer_rect').addClass('outer_shape');
                $('.inner_rect').addClass('inner_shape');
                myBorrow();
                mychart();
                setTimeout(function(){
                    //mychart().clear();
                    mychart().resize();
                    mychart();
                },2000);
            }else{
                ///离开借还书页面将动效删除
                $('.outer_rect').removeClass('outer_shape');
                $('.inner_rect').removeClass('inner_shape');
                $('.zs1').removeClass('bImg_moveZS1').addClass('borrow_zs');
                $('.ys1').removeClass('bImg_moveYS1').addClass('borrow_ys');
                $('.yx1').removeClass('bImg_moveYX1').addClass('borrow_yx');
                $('.zx1').removeClass('bImg_moveZX1').addClass('borrow_zx');
                $('.zs2').removeClass('bImg_moveZS2').addClass('borrow_zs');
                $('.ys2').removeClass('bImg_moveYS2').addClass('borrow_ys');
                $('.yx2').removeClass('bImg_moveYX2').addClass('borrow_yx');
                $('.zx2').removeClass('bImg_moveZX2').addClass('borrow_zx');

            }
            ///到馆统计加载数字动态变化和柱状图动态变化
            if(swiper.activeIndex==4){
                $('#two .border:eq(0)').addClass('border1');
                $('#two .border:eq(1)').addClass('border2');
                $('#two .border:eq(2)').addClass('border3');
                $('#two .border:eq(3)').addClass('border4');
                $('#third .border:eq(0)').addClass('border1');
                $('#third .border:eq(1)').addClass('border2');
                $('#third .border:eq(2)').addClass('border3');
                $('#third .border:eq(3)').addClass('border4');
                librarycount();
            }else{
                $('#two .border:eq(0)').removeClass('border1');
                $('#two .border:eq(1)').removeClass('border2');
                $('#two .border:eq(2)').removeClass('border3');
                $('#two .border:eq(3)').removeClass('border4');
                $('#third .border:eq(0)').removeClass('border1');
                $('#third .border:eq(1)').removeClass('border2');
                $('#third .border:eq(2)').removeClass('border3');
                $('#third .border:eq(3)').removeClass('border4');
            }
        }
    });
    ////推荐页面swiper左右滑动
    var banner = new Swiper('.swiper-container-h',{
        direction: 'horizontal',
        pagination: '.swiper-pagination-h',
        paginationType: 'bullets',
        onSlideChangeEnd: function (swiper) {
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            var activePage = $(swiper.slides[swiper.activeIndex]);
            mypageNum=swiper.activeIndex+1;
            currentpage.html(mypageNum);

        },
    });
    //点击开启旅程按钮进入首页
    $('.open').click(function(){
        mySwiper.slideNext();
    });
    //currentslide.addEventListener("touchstart",function(e){
    //    if(e.targetTouches[0].clientY<boxheight){
    //        ///说明用户滑动的是列表区域要阻止swiper翻页，给当前slide添加类名
    //        //console.log("用户触屏高度"+e.targetTouches[0].clientY+'<内容高度'+boxheight+'==屏幕禁止翻页滑动');
    //        $(this).addClass('swiper-no-swiping');
    //    }else{
    //        //console.log("用户触屏高度"+e.targetTouches[0].clientY+'>内容高度'+boxheight+'==屏幕可以翻页滑动');
    //        $(this).removeClass('swiper-no-swiping');
    //    }
    //});
    //给通知的第一个添加点击事件
    //var conbtn=document.querySelector('.conbtn');
    //conbtn.addEventListener("touchstart",function(e){
    //    $('.laylist').css('display','block');
    //    var noticemore = new IScroll('.botpcon',{
    //        mouseWheel: true,
    //        scrollbars: false
    //    });
    //
    //});
    //点击通知详情页面返回通知页面
    //$('.backnotice').click(function(){
    //    $('.laylist').css('display','none');
    //});
    ////首页时间戳
    function showTime() {
        var today = new Date(); //新建一个Date对象
        var date = today.getDate();//查询当月日期
        var day = today.getDay();//查询当前星期几
        var month = today.getMonth() + 1;//查询月份
        var year = today.getFullYear();//查询年份
        var hour = today.getHours();
        var min = today.getMinutes();
        //var sec = today.getSeconds();
        //var week = "";
        //if (day == 0) week = '星期日';
        //if (day == 1) week = '星期一';
        //if (day == 2) week = '星期二';
        //if (day == 3) week = '星期三';
        //if (day == 4) week = '星期四';
        //if (day == 5) week = '星期五';
        //if (day == 6) week = '星期六';
        if(hour<10){
            hour='0'+hour;
        }
        if(min<10){
            min='0'+min;
        }
        //if(sec<10){
        //    sec='0'+sec;
        //}
        $('#kp_clock').html(year + "年" + month + "月" + date + "日 " + hour + ":"+min);
    }
    ////当前到管统计数量
    function librarycount(){
            //var scounts=$('.pernum .co');//获得所有的框框
            //var arr=[682,135,2540];
            //var bars=$('.pernum .bar');//获得所有的bar进度条
            //$(arr).each(function(i,e){
            //    var num=arr[i];
            //    var per=parseInt(num/1000*100);//算出百分比加上单位后面,这里先按照1000人的基数算
            //    $(bars[i]).animate({height:per+"%"},2000);//给每个bar条高度上涨的动画
            //    $(scounts[i]).css('display','block');
            //    $(scounts[i]).animate({bottom:(per+3)+"%"},2000);
            //});
            $('.bar1').animate({height:40+"%"},2000);
            $('.count1').css('display','block');
            $('.count1').animate({bottom:43+"%"},2000);
            $('.bar2').animate({height:80+"%"},2000);
            $('.count2').css('display','block');
            $('.count2').animate({bottom:83+"%"},2000);

            var obj1 = new CountUp($(".count1"), 0, 9517,0,2,btotal3);
            obj1.start();
            var obj2 = new CountUp($(".count2"), 0, 900519,0,2,btotal3);
            obj2.start();
            //var obj3 = new CountUp($(".count3"), 0, 42024,0,2,btotal3);
            //obj3.start();
        //setTimeout(function() {
        //    ///下面是累计到馆人数假设总基数是100000
        //    var totalbar = $('.totalPer .rectangle');///获得斜条框元素
        //    $(totalbar).animate({width:"75%"},500);//给每个bar条高度上涨的动画
        //    var total_obj = new CountUp($("#rectangle"), 0, 900519,0,2,btotal3);
        //    total_obj.start();
        //},1000)

    }
    ////折线图数据参数配置
    function mychart(){
        var myChart = echarts.init(document.getElementById('main3'));
        var option = {
            title : {
                //x:'center',
                //y:'top',
                show:true,
                text: '借出还入曲线图',
                textStyle: {
                    fontSize: 14,
                    //fontWeight: 'bolder',
                    color: '#91a1ba'          // 主标题文字颜色
                },
                padding: [0,0,0,10],
            },
            tooltip : {
                trigger: 'axis',
                show:false
            },
            color:['#61cb5f','#e9a10e'],///这个数组是设置对应的图例的颜色
            legend: {
                //right:30,////图例整体组件离右边的距离
                //bottom:20,
                top:4,//调节图例上下的间距
                x: 'right',
                //y: 'top',
                //padding: -1,
                orient:"horizontal",
                //itemWidth:18,///设置图例组件整体的宽度
                //itemHeight:10,////设置图例组件整体的高度
                data:[
                    {name: '借出',
                        textStyle:{color:"#91a1ba",fontSize:14},
                        backgroundColor: '#60c960'
                    },
                    {name:'还入',
                        textStyle:{color:"#91a1ba",fontSize:14},
                        backgroundColor: '#c97d1f'
                    }
                ],
                selected: {
                    '借出' : true,
                    '还入' : true
                },

            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : false,
            xAxis : [
                {
                    type : 'category',
                    axisTick: {///去除刻度线
                        show: false
                    },
                    axisLine: {///坐标轴的颜色
                        lineStyle: {color: '#1d5564',}
                    },
                    boundaryGap : false,
                    data : ['8:00','9:00','10:00','11:00','12:00'],
                    //data:[],
                    splitLine:{
                        show: true,//显示网格线
                        lineStyle:{
                            color: '#1d5564',//网格的颜色
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel:{
                        rotate:45, //刻度旋转45度角
                        interval: 0,////当x轴数据过多时候，echart默认是把中间的数据隐藏掉，此属性是用来设置完全显示不用隐藏
                        textStyle:{
                            color:"#91a1ba",
                            align : 'left',
                            fontSize: 14

                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    //min: 100,///这里最大值和最小值可以不用写，会自动根据数据动态设置合理的最大值和最小值及刻度区间段
                    //max: 600,
                    //interval:50,
                    axisTick: {//去除刻度线
                        show: false
                    },
                    axisLine: {///坐标轴的颜色
                        lineStyle: {color: '#1d5564',}
                    },
                    data : [0,100,200,300,400,500,600],
                    splitLine:{
                        show: true,//去除网格线
                        lineStyle:{
                            color: '#1d5564',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:"#91a1ba",
                            //align : 'left',
                            fontSize: 14
                        }
                    }
                }
            ],
            grid:{
                x:'15%',
                y:'10%',
                x2:'5%',
                y2:'20%'
            },
            series : [
                {
                    name:'借出',
                    type:'line',
                    barWidth :2,
                    data:[123,242,463,175,325],
                    //data:[],
                    symbol: "circle",///设置折线拐点事实心圆，不是空心圆
                    symbolSize: 2,//拐点大小
                    smooth:true,///设置拐点线条比较平滑
                    itemStyle : {
                        normal : {
                            label : {show: true},//设置显示每个拐点的数据
                            color:'#60c960',//设置折线拐点的颜色
                            //borderColor: "blue" , // 设置折线拐点边框的颜色，
                            lineStyle:{
                                color:'#60c960'///设置折线颜色
                            }

                        }
                    }
                },
                {
                    name:'还入',
                    type:'line',
                    barWidth :2,
                    data:[242,334,163,375,425],
                    //data:[],
                    symbol: "circle",
                    symbolSize: 2,//拐点大小
                    smooth:true,///设置拐点线条比较平滑
                    itemStyle : {
                        normal : {
                            label : {show: true},
                            color:'#c97d1f',//设置折线点的颜色
                            //borderColor: "blue" , // 设置折线拐点边框的颜色，
                            lineStyle:{
                                color:'#c97d1f'///设置折线颜色
                            }
                        }
                    }
                }
            ],
            borderColor:'#215563',
        };
        myChart.setOption(option);
        return myChart;
    }
    ////借还书数字滚动
    function myBorrow(){
        total_obj = new CountUp($(".btotal_num"), 0, 97989,0,3,btotal);
        total_obj.start();
        //setTimeout(function(){///今日和本周四个角添加出场动画
            $('.zs1').addClass('bImg_moveZS1');
            $('.ys1').addClass('bImg_moveYS1');
            $('.yx1').addClass('bImg_moveYX1');
            $('.zx1').addClass('bImg_moveZX1');
            $('.zs2').addClass('bImg_moveZS2');
            $('.ys2').addClass('bImg_moveYS2');
            $('.yx2').addClass('bImg_moveYX2');
            $('.zx2').addClass('bImg_moveZX2');
        //},3000);
        setTimeout(function(){///四个角出现之后再出现文字和数字
            today_obj = new CountUp($(".today_num"), 0, 135,0,2,btotal2);
            today_obj.start();
            //week_obj = new CountUp($(".week_num"), 0, 7021,0,2,btotal2);
            //week_obj.start();
        },2500)
    }
    $(window).resize(function (){
        mychart().resize();
    });

});




